<template>
	<view class="page">
		<view class="content1">支付密码</view>

		<view class="content2">请输入支付密码</view>
		<view class="content3">
			<u-message-input width="90" :focus="true" :value="inputValue" :disabled-keyboard="true" :dot-fill="true" :breathe="true" mode="box"
			 :maxlength="6" @change="change" @finish="finish"></u-message-input>
		</view>
		<!-- <view class="content4" v-if="type != 1">支付密码为6位数字，用户提现、设置密保、添加银行卡等操作，可保障资金安全</view> -->
		<!-- 键盘 -->
		<u-keyboard ref="uKeyboard" mode="number" :mask-close-able="false" :mask="false" :show-tips="false" :cancel-btn="false" :confirm-btn="false" @change="valChange" @backspace="backspace" :dot-enabled="false" v-model="show"></u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				type: '',
				value: '',
				inputValue: '',
				money: ''
			}
		},
		onReady() {
			// 如果想一进入页面就打开键盘，请在此生命周期调用
			this.show = true;
		},
		onLoad(option) {
			this.money = option.change_money
		},
		onShow() {
			if(this.type == 1) {
				uni.setNavigationBarTitle({
					title: '设置支付密码' //这是修改后的导航栏文字
				})
			}
		},
		methods: {
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val.toString();
				this.inputValue = this.value
				console.log(this.value);
				if (this.value.length == 6) {
					this.validationPay()
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				this.inputValue = this.value
				console.log(this.value);
			},
			// 验证支付密码
			validationPay() {
				this.$api.post(global.apiUrls.withdrawalsPlay, {
					money: this.money,
					type: 1,
					withdraw_paw: this.inputValue
				}).then(res => {
					this.$message.info(res.data.msg)
					if(res.data.code == 1) {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/user/wallet/withdraw-success'
							})
						},500)
					}
				})
			}
		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #f2f2f1;
		text-align: center;
		padding: 160rpx 90rpx 0;
		color: #333333;

		.content1 {
			font-size: 36rpx;
			margin-bottom: 24rpx;
			font-weight: bold;
		}

		.content2 {
			font-size: 28rpx;
			margin-bottom: 56rpx;
		}

		.content3 {
			margin-bottom: 40rpx;

			/deep/.u-char-item {
				margin: 0 !important;
			}

			/deep/.u-char-item {
				border-color: #CCCCCC !important;
			}

			/deep/.u-box-active {
				border: 1rpx solid #CCCCCC !important;
			}
		}

		.content4 {
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>
